<template>
	<view>
		<view class="header">
			<view class="avatar-wrapper">
				<image class="avatar" :src="addBase(trainerInfo.avatar)" mode="aspectFill"></image>
			</view>
			<view class="detail">
				<p><strong>教练 {{ trainerInfo.username }}</strong></p>
				<p>身高：{{ trainerInfo.height }}cm</p>
				<p>体重：{{ trainerInfo.weight }}kg</p>
				<button class="contact-btn" @click="callTrainer">联系教练</button>
			</view>
		</view>
		<view class="calendar-wrapper">
			<uni-calendar :insert="true" :start-date="startDate" :end-date="endDate" :selected="selected"
				@change="change" />
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="base" :title="'请确认您的预约时间为' + date" @confirm="dialogInputConfirm">
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="phoneDialog" type="dialog">
			<uni-popup-dialog mode="base" title="联系教练" :content="trainerInfo.phone || '暂无联系方式'" :before-close="true"
				@confirm="makePhoneCall" @close="closePhoneDialog">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import request from '../../utils/request';
	import {
		addBase
	} from '../../utils/myFunction';

	export default {
		data() {
			return {
				date: '',
				radio: 0,
				time: [{
					text: '上午',
					value: 0
				}, {
					text: '下午',
					value: 1
				}],
				trainerInfo: {},
				id: null,
				selected: []
			}
		},
		onLoad(data) {
			this.id = data.id;
			this.getTrainerInfo();
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			addBase(url) {
				return addBase(url);
			},
			getTrainerInfo() {
				request({
					url: 'system/usr/' + this.id,
					method: 'GET'
				}).then(res => {
					this.trainerInfo = res.data;
					this.getAppointment();
				})
			},
			getAppointment() {
				request({
					url: 'system/appointment/list',
					method: 'GET',
					data: {
						trainerId: this.trainerInfo.id
					}
				}).then(res => {
					this.selected = res.rows.map(item => {
						const date = new Date(item.date);
						const formattedDate = this.formatDate(date);
						return {
							date: formattedDate,
							info: '已约满',
							data: {
								custom: '该时段已被预约'
							}
						}
					});
				})
			},
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			change(e) {
				const selectedDate = e.fulldate;
				const isBooked = this.selected.some(item => item.date === selectedDate);

				if (isBooked) {
					uni.showToast({
						title: '该日期已约满',
						icon: 'none'
					});
					return;
				}

				this.date = selectedDate;
				this.$refs.inputDialog.open();
			},
			dialogInputConfirm() {
				request({
					url: 'system/appointment',
					method: 'POST',
					data: {
						userId: uni.getStorageSync('user').id,
						trainerId: this.trainerInfo.id,
						date: this.date
					}
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '预约成功'
					});
					this.$refs.inputDialog.close();
					this.getAppointment();
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'end') {
					year = year + 1;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			callTrainer() {
				this.$refs.phoneDialog.open();
			},
			makePhoneCall() {
				if (this.trainerInfo.phone) {
					uni.makePhoneCall({
						phoneNumber: this.trainerInfo.phone,
						success: () => {
							this.$refs.phoneDialog.close();
						},
						fail: () => {
							uni.showToast({
								title: '拨打电话失败',
								icon: 'none'
							});
						}
					});
				}
			},
			closePhoneDialog() {
				this.$refs.phoneDialog.close();
			}
		}
	}
</script>

<style lang="scss">
	.header {
		position: relative;
		padding: 40rpx 0;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	.avatar-wrapper {
		position: relative;
		width: 180rpx;
		height: 180rpx;
		margin: 0 auto;

		&::before {
			content: '';
			position: absolute;
			top: -6rpx;
			left: -6rpx;
			right: -6rpx;
			bottom: -6rpx;
			background: linear-gradient(45deg, #00dbde, #fc00ff);
			border-radius: 50%;
			z-index: 1;
			animation: spin 4s linear infinite;
		}

		&::after {
			content: '';
			position: absolute;
			top: -3rpx;
			left: -3rpx;
			right: -3rpx;
			bottom: -3rpx;
			background: #fff;
			border-radius: 50%;
			z-index: 2;
		}
	}

	.avatar {
		position: relative;
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		border: 4rpx solid #fff;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		z-index: 3;
		object-fit: cover;
	}

	.detail {
		margin-top: 30rpx;
		text-align: center;
		color: #fff;

		p {
			margin: 10rpx 0;
			font-size: 28rpx;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);

			strong {
				font-size: 32rpx;
				font-weight: 600;
			}
		}

		.contact-btn {
			margin-top: 20rpx;
			width: 180rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 24rpx;
			color: #764ba2;
			background: #ffffff;
			border-radius: 30rpx;
			padding: 0;
		}
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.radio {
		margin-left: 70px;
	}

	.calendar-wrapper {
		transform: scale(0.95);
		transform-origin: top center;

		:deep(.uni-calendar) {

			.uni-calendar__weeks {
				padding: 10rpx 0;

				.uni-calendar__weeks-day {
					font-size: 24rpx;
				}
			}

			.uni-calendar__content {
				.uni-calendar__day {

					.uni-calendar__day-text {
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>